<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>手机号登录</text>
      </view>
      <view class="sub-title">
        <text>未注册的手机号登录后将自动注册</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="login-form">
      <!-- 手机号 -->
      <view class="form-item">
        <input
          class="form-item--input"
          type="number"
          maxlength="11"
          v-model="form.mobile"
          placeholder="请输入手机号码"
        />
      </view>
      <!-- 图形验证码 -->
      <view class="form-item">
        <input
          class="form-item--input"
          type="text"
          maxlength="5"
          placeholder="请输入图形验证码"
          v-model="captchaCode"
        />
        <view class="form-item--parts">
          <view class="captcha">
            <image
              class="image"
              :src="imageForm.base64"
              @click="getImageCode"
            ></image>
          </view>
        </view>
      </view>
      <!-- 短信验证码 -->
      <view class="form-item">
        <input
          class="form-item--input"
          type="number"
          maxlength="6"
          placeholder="请输入短信验证码"
          v-model="form.smsCode"
        />
        <view class="form-item--parts">
          <view class="captcha-sms" @click="getSmsCode">
            <text class="activate">获取验证码</text>
            <!-- <text  class="un-activate">重新发送(11)秒</text> -->
          </view>
        </view>
      </view>
      <!-- 登录按钮 -->
      <view class="login-button" @click="onSubmit">
        <text>登录</text>
      </view>
      <p>
        注意:先输入手机号，再输入图形验证码，然后先点击获取验证码(可以发请求，但是不会真发送，验证码输入888888即可)，再次输入图片验证码，最后点登录
      </p>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import { image, sendSmsCaptcha } from '../../api/captcha'
export default {
  data () {
    return {
      form: {
        mobile: '16822222222',
        smsCode: ''
      },
      imageForm: {},
      captchaCode: ''
    }
  },
  onLoad () {
    this.getImageCode()
  },
  methods: {
    ...mapActions('user', ['Login']),
    // 获取图形验证码
    async getImageCode () {
      const { data } = await image()
      this.imageForm = data
      // console.log(`output->data`, data)
    },
    // 获取用户验证码
    async getSmsCode () {
      await sendSmsCaptcha({
        form: {
          captchaCode: this.captchaCode,
          captchaKey: this.imageForm.key,
          mobile: this.form.mobile
        }
      })
        .then(() => {
          this.getImageCode()
        })
        .catch(() => {
          setTimeout(() => {
            this.form.smsCode = '888888'
          }, 1000)
        })
    },
    // 用户登录
    async onSubmit () {
      this.$store.dispatch('Login', {
        mobile: this.form.mobile,
        smsCode: this.form.smsCode,
        isParty: false,
        partyData: {}
      })
      uni.showToast({ title: '登录成功！' })
      // 跳转到主页
      setTimeout(() => {
        uni.switchTab({ url: '/pages/user/index' })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 100rpx 60rpx;
  min-height: 100vh;
  background-color: #fff;
}

// 页面头部
.header {
  margin-bottom: 60rpx;

  .title {
    color: #191919;
    font-size: 54rpx;
  }

  .sub-title {
    margin-top: 20rpx;
    color: #b3b3b3;
    font-size: 28rpx;
  }
}

// 输入框元素
.form-item {
  display: flex;
  padding: 18rpx;
  border-bottom: 1rpx solid #f3f1f2;
  margin-bottom: 30rpx;
  height: 96rpx;

  &--input {
    font-size: 28rpx;
    letter-spacing: 1rpx;
    flex: 1;
    height: 100%;
  }

  &--parts {
    min-width: 100rpx;
    height: 100%;
  }

  // 图形验证码
  .captcha {
    height: 100%;

    .image {
      display: block;
      width: 192rpx;
      height: 100%;
    }
  }

  // 短信验证码
  .captcha-sms {
    font-size: 28rpx;
    line-height: 50rpx;
    padding-right: 20rpx;

    .activate {
      color: #cea26a;
    }

    .un-activate {
      color: #9e9e9e;
    }
  }
}

// 登录按钮
.login-button {
  width: 100%;
  height: 86rpx;
  margin-top: 80rpx;
  background: linear-gradient(to right, #ecb53c, #ff9211);
  color: #fff;
  border-radius: 80rpx;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
